<template>
  <div class="swiper-container">
    <swiper :="config" @swiper="onSwiper" @slideChange="onSlideChange">
      <swiper-slide v-for="(item, index) of bannerList" :key="index">
        <img :src="item.img" />
      </swiper-slide>
      <!-- 以下 如果放置在swiper外面，需要自定义样式-->
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->
      <!-- <div class="swiper-scrollbar"></div> -->
      <!-- <div class="swiper-pagination"></div> -->
    </swiper>
  </div>
</template>
<script lang="ts">
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
// import 'swiper/scss'
// import 'swiper/scss/navigation'
// import 'swiper/scss/pagination'
// import banner from '@/assets/banner.png';
export default {
  name: 'Carousel',
  data() {
    return {
      bannerList: [
        // {
        //   img: banner
        // },
        {
          img: 'https://seeksdata.oss-cn-shanghai.aliyuncs.com/assembly/icons/1644458877480.jpg'
        },
        {
          img: 'https://seeksdata.oss-cn-shanghai.aliyuncs.com/assembly/icons/1644458877480.jpg'
        },
        {
          img: 'https://seeksdata.oss-cn-shanghai.aliyuncs.com/assembly/icons/1066849005415305216.png'
        }
      ],
      config: {
        modules: [Autoplay, Pagination, Navigation, Scrollbar],
        slidesPerView: 1,
        speed: 300,
        autoplay: {
          delay: 3500,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // navigation: true,
        navigation: {
          // nextEl: '.swiper-button-next',
          // prevEl: '.swiper-button-prev'
        },
        pagination: {
          clickable: true
          // el: '.swiper-pagination'
        },
        scrollbar: {
          draggable: true
          // el: '.swiper-scrollbar'
        }
      }
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    const onSwiper = (swiper: any) => {
      console.log(swiper)
    }
    const onSlideChange = () => {
      // console.log('slide change')
    }
    return {
      onSwiper,
      onSlideChange
    }
  }
}
</script>
<style scoped lang="scss">
.swiper-container {
  width: 100%;
  /* background-color: orange; */
  text-align: center;

  img {
    width: 100%;
  }

  .swiper {
    --swiper-theme-color: pink;
    --swiper-pagination-color: #fff;
  }
}
</style>
